<template>
    <div class="layout-header-menu">
        <el-menu :default-active="state.defaultActive" class="el-menu-demo" mode="horizontal">
            <el-menu-item index="1000" @click="open('/admin/dashboard')">仪表盘</el-menu-item>
            <el-menu-item index="1001" @click="open('/admin/live')">分屏监控</el-menu-item>
            <el-menu-item index="1002" @click="open('/admin/device')">国标设备</el-menu-item>
            <el-menu-item index="1003" @click="open('/admin/stream/push')">推流列表</el-menu-item>
            <el-menu-item index="1004" @click="open('/admin/stream/proxy')">拉流代理</el-menu-item>
            <el-menu-item index="1005" @click="open('/admin/virtual/video/stream')">模拟视频流</el-menu-item>
            <el-menu-item index="1006" @click="open('/admin/platform')">国标级联平台</el-menu-item>
            <el-menu-item index="1007" @click="open('/admin/user')">用户管理</el-menu-item>
        </el-menu>
    </div>
</template>
<script setup lang="ts">
import { reactive, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();
const state = reactive({
    defaultActive: '1000',
});

const open = (path:string)=>{
  router.replace(path);
};

watch(
    () => route.path,
    () => {
      if (route.meta.menu !== null && route.meta.menu !== undefined) {
        state.defaultActive = route.meta.menu;
      }
    },
    { deep: true, immediate: true }
);
</script>
